<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>仿百度注册</title>
    <link rel="stylesheet" href="/static/css/custom.css">
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<form>
<div class="register">
          {% if html_name %}
          {% if html_phonenumber %}
          {% if html_password %}
            {{ html_name }},恭喜你注册成功，欢迎你！
          {% endif %}
          {% endif %}
          {% endif %}
          {% if html_error %}
            {{ html_error }}用户名格式错误，滚出去！
            {% endif %}
          {% if html_number %}
            {{ html_number }},电话号码格式错误，滚出去！
            {% endif %}
          {% if html_word %}
            {{ html_word }}密码格式错误，滚出去！
          {% endif %}

    <p>
        <label>用户名</label><input type="text" placeholder="请设置用户名" id="username" name="name"><span id="userinfo"></span>
    </p>
    <p>
        <label>手机号</label><input type="text" placeholder="请填写手机号" name="phonenumber"><span id="telinfo"></span>
    </p>
    <p>
        <label>密码</label><input type="text" placeholder="请设置用户密码" name="password" ><span id="passinfo"></span>
    </p>
    <p>
        <label>验证码</label>
        <input type="text" placeholder="验证码" style="width: 205px">
        <input type="button" value="点击获取验证码" style="width: 143px">
    </p>
    <p style="margin-left: 75px;font-size: 12px">
        <input type="checkbox" required="required"> 阅读并接受<a href="#">《百度用户协议》</a>及<a href="#">《百度隐私权保护声明》</a>
    </p>
    <p style="margin-left: 75px;">
        <input type="submit" value="注册">
    </p>
</div>
</form>
<script>
    document.getElementById('username').onblur = function () {
        flag = true;
        if(this.value.length < 5 || this.value.length > 15){
            document.getElementById('userinfo').innerHTML = "<img src='/static/img/err_small.png'> 用户名长度为6-15之间";
            this.style.borderColor = "red";
            return
        }
        $.ajax({
            url: 'http://127.0.0.1:5000/check_form',
            type: 'GET', //GET
            async: true,    //或false,是否异步
            data: {
                username: $('#username').val()
            },
            timeout: 500000,    //超时时间
            dataType: 'json', //返回的数据格式：json/xml/html/script/jsonp/text
            beforeSend: function (xhr) {
                console.log('发送前')
            },
            success: function (data, textStatus, jqXHR) {
                console.log(data);
                if(data == 400){
                    $("#userinfo").html("<img src='/static/img/err_small.png'> 请输入用户名");
                    flag = false
                }else if(data == 300){
                    $("#userinfo").html("<img src='/static/img/err_small.png'> 用户名已被占用");
                    flag = false
                }
            },
            error: function (xhr, textStatus) {
                console.log('错误');
            },
            complete: function () {
                console.log('结束')
            }
        });

        if (flag == true){
            document.getElementById('userinfo').innerHTML = "<img src='/static/img/ok_small.png'>";
            this.style.borderColor = "black";
        }
    };


</script>
</body>
</html>